$(document).ready(function () {



    layui.use(function () {



        // 表格
        form = layui.form;

        form.on('select(nameType)', function (data) {//状态下拉
            $('div[lay-filter="search"]').click();
        });

        form.on('submit(search)', function (data) {//监听查询提交
            params = data.field;
            queryTableList(1)
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


        initSubMenu();
        queryTableList(1);
        queryMen()

        var laydate = layui.laydate;
        laydate.render({
            elem: '#laydate-type-month',
            type: 'month'
            , value: new Date()
            , done: function (value, date, endDate) {
                tab4MonthData()
            }
        });
        laydate.render({
            elem: '#laydate-type-year',
            type: 'year'
            , value: new Date()
            , done: function (value, date, endDate) {
                tab4YearData()
            }
        });
        laydate.render({
            elem: '#tab2-date'
            , range: true
            , done: function (value, date, endDate) {
                tab2Chart1()
            }
        });



    });
})
var params = {};//查询条件参数
var form, unit;
var drawer;//抽屉实例
var curPid = null;//当前选中人员



// 查询人员下拉
queryMen = () => {
    new AjaxChain()
        .setUrl('/person/list')
        .setData({
            pageNum: 1,
            pageSize: 999
        })
        .then(data => {
            typeStr = data.data.reduce((x, y) => {
                return x + `<option value="${y.name}">${y.name}</option>`
            }, '<option value="">名称(可搜索)</option>')

            $('#search-men').empty().append(typeStr)

            form.render('select');
        })
        .send();
}

// 节点分页
queryTablePage = (total) => {

    var laypage = layui.laypage;


    laypage.render({
        elem: 'card-page',
        count: total,
        limit: 8,
        groups: 3,
        prev: '<i class="layui-icon layui-icon-left"></i>',
        next: '<i class="layui-icon layui-icon-right"></i>',
        layout: ['prev', 'page', 'next', 'count'],
        jump: function (obj, first) {

            if (!first) {

                queryTableList(obj.curr)

            }

        }

    });


}

//查询节点列表
queryTableList = (pN) => {
    params.pageNum = pN
    params.pageSize = 8;

    new AjaxChain()
        .setUrl('/person/list')
        .setData(params)
        .then(data => {

            if (pN == 1) {
                queryTablePage(data.total)
            }

            if (data.total == 0) {
                $('.card-content').empty().append('<div class="no-data">未查询到人员数据</div>')
                return
            }

            $('.card-content').empty()
                .append(
                    data.data.reduce(
                        (x, y) => {
                            return x +
                                `<div class="card-item gradient-card" onclick='manCardDetail(${JSON.stringify(y)})'>
                                    <div class="gradient-card1">
                                        <div class="card-item-title">
                                            <img src="${y.photoPath ? ('/images/' + y.photoPath) : '../static/img/photo.png'}">
                                            <div class="card-item-title1">
                                                <div class="card-item-title1-name">
                                                    ${y.name}
                                                </div>
                                                <div>
                                                    <span class="layui-badge layui-bg-blue">${y.genderDesc || '-'}</span>
                                                    <span class="layui-badge layui-bg-green">${y.professionalTitleDesc || '-'}</span>
                                                    <span class="layui-badge layui-bg-cyan">${$.calculateAge(y.birthDate)}岁</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-item-con">
                                                <div>民族：${y.nation || ''}</div>
                                                <div>政治面貌：${y.politicalStatusDesc || ''}</div>
                                                <div>职务：${y.postDesc || ''}</div>
                                                <div>专业技能：${y.positionalPositionDesc || ''}</div>
                                                <div>联系方式：${y.cellphone || ''}</div>
                                                <div>入职日期：${y.workDate || ''}</div>
                                        </div>
                                    </div>
                                </div>`
                        }, ''
                    ))

        })
        .catch(err => {
            console.error('请求异常:', err);
        })
        .send();
}

// 展开详情
function manCardDetail(res) {

    $('#cards-list').hide()
    $('#card-detail').show()


    $('.card-left-msg').empty().append(
        `<div class="msg1">
            <img src="${res.photoPath ? ('/images/' + res.photoPath) : '../static/img/photo.png'}">
            <div class="msg1-name">
                <span>${res.name}</span>
                <div>性 别：${res.genderDesc}</div>
                <div>年 龄：${$.calculateAge(res.birthDate)}</div>
            </div>
        </div>
        <div class="msg2">
            <div>
                <span>出生日期</span>
                <span>${res.birthDate}</span>
            </div>
            <div>
                <span>联系方式</span>
                <span>${res.cellphone}</span>
            </div>
            <div>
                <span>入职日期</span>
                <span>${res.workDate}</span>
            </div>
        </div>`
    )

    curPid = res.id;

    personScore()
    $('.card-tab-item').eq(0).click()

}



// 返回人员列表

function rebackList() {
    $('#cards-list').show()
    $('#card-detail').hide()
}


function personScore() {

    new AjaxChain()
        .setUrl('/train/score/person/pass/total/count')
        .setData(
            {
                "personId": curPid,
            }
        )
        .then(data => {

            var str = `<div style="background: linear-gradient(180deg, rgb(19, 91, 98) 0%, rgb(3, 32, 42) 100%);color: #DBFFFF;height: 0.35rem;line-height: 0.3rem;text-indent: 0.3rem;width: 100%;">训练评估</div>
                        <div class="msg1">
                        <div>${data.totalRate}</div>
                        <div>合格率</div>
                        </div>
                        <img src="../static/img/cardbg.png" alt="">
                        <div class="msg2">`;

            str = [1, 2, 4, 6].reduce(
                (x, y) => {

                    let tempName = new ST().project(1).find(function (activity) {
                        return activity.type === y;
                    });

                    var temp = data.typeCount.find(function (activity) {
                        return activity.trainType === y;
                    });


                    $('.tab1-chart-tool>div[data-type=' + y + ']').find('.tab1-count').html(temp ? (temp.total + '次') : '-')

                    return x +
                        `
                   <div>
                        <div class="msg-score">${temp ? (temp.passRate) : '-'}</div>
                        <div class="msg-project">${tempName.name}</div>
                    </div>
                   `
                }, str
            )

            $(".card-left-chart").empty().append(
                str + `</div></div>`
            )


        })
        .send();

}


// 详情切换
$('.card-tab-item').click(function (e) {
    $(e.currentTarget).addClass('active').siblings().removeClass('active');

    var type = $(e.currentTarget).data().type

    $('.card-tab-content').hide();
    $('.card-tab' + type).show();

    switch (type) {
        case 1:
            tab1Chart()
            tab1Count()
            break;
        case 2:
            $('.tab2-switch>div').eq(0).click()

            break;
        case 3:

            var laydate = layui.laydate;
            laydate.render({
                elem: "#tool-customize",
                range: true
                , done: function (value, date, endDate) {
                    queryParams = {
                        "type": 3,
                        "personId": curPid,
                        "beginTime": value.split(' - ')[0],
                        "endTime": value.split(' - ')[1]
                    }
                    $('#tool-year').html('年度')
                    $('#tool-month').html('月度')
                    initChart()

                }
            });
            laydate.render({
                elem: "#tool-year",
                type: 'year'
                , value: new Date()
                , done: function (value, date, endDate) {
                    queryParams = {
                        "type": 2,
                        "personId": curPid,
                        "year": value
                    }
                    $('#tool-customize').html('自定义')
                    $('#tool-month').html('月度')
                    initChart()
                }
            });
            laydate.render({
                elem: "#tool-month",
                type: 'month'
                , done: function (value, date, endDate) {
                    queryParams = {
                        "type": 1,
                        "personId": curPid,
                        "year": value.split('-')[0],
                        "month": value.split('-')[1]
                    }
                    $('#tool-customize').html('自定义')
                    $('#tool-year').html('年度')
                    initChart()
                }
            });


            queryParams = {
                "type": 2,
                "personId": curPid,
                "year": $("#tool-year").html()
            }
            initChart()

            break;
        case 4:

            tab4MonthData()
            tab4YearData()
            tab4AllData()
            break;

        default:
            break;
    }
})



// tab1图表

//tab1图表切换类型
var tab1Type = 1;

$('.tab1-chart-tool>div').click(function (e) {
    $(e.currentTarget).addClass('active').siblings().removeClass('active');

    tab1Type = $(e.currentTarget).data().type
    tab1Chart()
})

//tab1图表切换统计类型
var tab1ChartType = 1;
$('.tab1-chart-switch>div').click(function (e) {
    $(e.currentTarget).addClass('active').siblings().removeClass('active');

    tab1ChartType = $(e.currentTarget).data().type
    tab1Chart()
})

function tab1Count() {

    new AjaxChain()
        .setUrl('/train/score/person/best/count')
        .setData(
            JSON.stringify(
                {
                    "personId": curPid,
                }
            )
        )
        .setMethod('post')
        .then(data => {

            var str = data.reduce((x, y) => {

                if ([1, 2, 4, 6].includes(y.trainType)) {

                    let temp = new ST().project(1).find(function (activity) {
                        return activity.type === y.trainType;
                    });


                    return x +
                        `<div class="tab1-item">
                    <div class="tab1-title">${temp.name}  （单位：秒）</div>
                    <div class="tab1-count">
                        <div class="tab1-circle">
                            <div>${y.minTime}</div>
                            <div>最好成绩</div>
                        </div>
                        <div class="tab1-circle">
                            <div>${y.avgTime}</div>
                            <div>平均成绩</div>
                        </div>
                        <div class="tab1-circle">
                            <div>${y.total}</div>
                            <div>训练次数</div>
                        </div>
                    </div>
                </div>`

                } else {
                    return x + ''
                }

            }, '')


            $('.tab1-top').empty().append(str)
        })
        .send();

}


var chartTab1 = null;
function tab1Chart() {

    new AjaxChain()
        .setUrl('/train/score/person/time/count')
        .setData(
            JSON.stringify(
                {
                    "personId": curPid,
                    "type": 6,
                    "month": 12,
                    "trainType": tab1Type
                }
            )
        )
        .setMethod('post')
        .then(data => {

            data = data[tab1Type]
            var xData = [], avgTime = [], maxTime = [], minTime = [], totalCount = []

            $.each(data, function (key, value) {
                xData.push(value.date)
                avgTime.push(value.avgTime)
                maxTime.push(value.maxTime)
                minTime.push(value.minTime)
                totalCount.push(value.total)
            })




            var option = {
                color: ['#A290FA', '#FFA12A', '#2AFFA5'],
                legend: {
                    show: true,
                    textStyle: {
                        color: '#E2F1FF'
                    }
                },
                grid: {
                    left: '2%',
                    right: '3%',
                    bottom: '10%',
                    top: '5%',
                    containLabel: true
                },
                legend: {
                    data: tab1ChartType == 1 ? ['最快用时', '平均用时', '最慢用时'] : ['训练次数'],
                    icon: 'rich',
                    show: true,
                    itemWidth: 14,
                    itemHeight: 14,
                    textStyle: {
                        color: '#C6D1DB',
                        fontSize: '14px',
                    },
                    top: 0,
                    right: 10,
                    itemGap: 34,
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        color: "#BDE4FF"
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#296085',
                        }
                    },
                    data: xData
                },
                yAxis: {
                    name: tab1ChartType == 1 ? "用时(秒)" : "次数",
                    nameTextStyle: {
                        padding: [0, 0, -20, 60]
                    },
                    type: 'value',
                    minInterval: 5,
                    axisLabel: {
                        color: "#BDE4FF"
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#296085',
                        }
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: '#296085',
                            type: "dashed"
                        }
                    }
                },
                series: tab1ChartType == 1 ? [
                    {
                        name: '平均用时',
                        data: avgTime,
                        type: 'line',
                        lineStyle: {
                            shadowColor: 'rgba(20, 20, 20, 0.9)',
                            shadowBlur: 3,
                            shadowOffsetX: 3,
                            shadowOffsetY: 2,
                        },
                    },
                    {
                        name: '最慢用时',
                        data: maxTime,
                        type: 'line',
                        lineStyle: {
                            shadowColor: 'rgba(20, 20, 20, 0.9)',
                            shadowBlur: 3,
                            shadowOffsetX: 3,
                            shadowOffsetY: 2,
                        },
                    },
                    {
                        name: '最快用时',
                        data: minTime,
                        type: 'line',
                        lineStyle: {
                            shadowColor: 'rgba(20, 20, 20, 0.9)',
                            shadowBlur: 3,
                            shadowOffsetX: 3,
                            shadowOffsetY: 2,
                        },
                    },
                ] : [
                    {
                        name: '训练次数',
                        data: totalCount,
                        type: 'line',
                        lineStyle: {
                            shadowColor: 'rgba(20, 20, 20, 0.9)',
                            shadowBlur: 3,
                            shadowOffsetX: 3,
                            shadowOffsetY: 2,
                        },
                    }
                ]
            };

            if (chartTab1) {
                chartTab1.dispose();
                chartTab1 = null;
            }

            chartTab1 = echarts.init(document.getElementById('tab1-chart'));
            chartTab1.setOption(option);

        })
        .send();
}


// 第二个tab
var tab2Type = 1
$('.tab2-switch>div').click(function (e) {
    $(e.currentTarget).addClass('active').siblings().removeClass('active');

    var type = $(e.currentTarget).data().type
    tab2Type = type

    tab2Table()
    tab2Count()
    $('.tab2-tool>div').eq(0).click()

})

// 页签二切换时间
var tab2TimeType = 1
$('.tab2-tool>div').click(function (e) {
    $(e.currentTarget).addClass('active').siblings().removeClass('active');

    var type = $(e.currentTarget).data().type;

    tab2TimeType = type;
    if (type != 3) {
        tab2Chart1();
        $('#tab2-date').html('自定义')
    }
})
// 页签二切换图表类型
var tab2ChartType = 1
$('.tab2-title>span').click(function (e) {
    $(e.currentTarget).addClass('active').siblings().removeClass('active');

    var type = $(e.currentTarget).data().type;
    tab2ChartType = type;

    tab2Chart1()

})


//查询列表
tab2Table = () => {
    layui.use('table', function () {
        var table = layui.table;

        //展示已知数据
        table.render({
            elem: '#tab2-table'
            , text: {
                none: '暂无数据'
            }
            , method: 'get'
            , url: ajaxPrefix() + "/train/score/list"
            , headers: {
                SessionId: JSON.parse(localStorage.getItem('sessionId'))
            }
            , where: {
                pageSize: 10,
                trainType: tab2Type,
                personId: curPid
            }
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.status == 200 ? 0 : 1, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.result.total, //解析数据长度
                    "data": res.result.data //解析数据列表
                };
            }
            , request: {
                pageName: 'pageNum' //页码的参数名称，默认：page
                ,
                limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            , cols: [[ //标题栏
                { field: 'dataTime', title: '训练时间', align: "center" }
                , { field: 'useTime', title: '训练成绩（秒）', align: "center" }

            ]]
            , height: 'full'
            // ,skin: 'line' //表格风格
            , even: true
            , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['count', 'prev', 'page', 'next']
                , groups: 3 //只显示 1 个连续页码
                , first: false //不显示首页
                , last: false //不显示尾页

            }
            , done: function (res, curr, count) {

                $('.layui-table-cell').height($('.tab2-table').height() / 20);
            },

        });

    });
}

var tab2Chart = null;
function tab2Chart1() {

    const [beginTime, endTime] = $('#tab2-date').html().split(' - ')

    var p = {};

    switch (tab2TimeType) {
        case 1:
            p = {
                "type": 4,
                "day": 7,
            }
            break;
        case 2:
            p = {
                "type": 4,
                "day": 30,
            }
            break;
        case 3:
            p = {
                "type": 3,
                "beginTime": beginTime,
                "endTime": endTime,
            }
            break;

        default:
            break;
    }

    p.personId = curPid
    p.trainType = tab2Type


    new AjaxChain()
        .setUrl('/train/score/person/time/count')
        .setData(
            JSON.stringify(
                p
            )
        )
        .setMethod('post')
        .then(data => {

            data = data[tab2Type]
            var xData = [], avgTime = [], maxTime = [], minTime = [], yData = [], passrateData = []

            $.each(data, function (key, value) {
                xData.push(value.date)
                yData.push(value.total)
                avgTime.push(value.avgTime)
                maxTime.push(value.maxTime)
                minTime.push(value.minTime)


                value.total == 0 ? (passrateData.push(null)) : (passrateData.push(value.passRate.slice(0, -1)))
            })


            if (tab2ChartType == 1) {

                var option = {
                    legend: {
                        show: true,
                        textStyle: {
                            color: '#E2F1FF'
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '5%',
                        right: '5%',
                        bottom: '10%',
                        top: '20%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        axisLabel: {
                            color: "#BDE4FF"
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#296085',
                            }
                        },
                        data: xData
                    },
                    yAxis: {
                        name: '次',
                        type: 'value',
                        minInterval: 1,
                        axisLabel: {
                            color: "#BDE4FF"
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#296085',
                            }
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#296085',
                                type: "dashed"
                            }
                        }
                    },
                    series: [
                        {
                            data: yData,
                            type: 'bar',
                            // barWidth: 8,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                    textStyle: {
                                        color: '#fff'
                                    }
                                }
                            },
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#0B8CBF'
                                },
                                {
                                    offset: 1,
                                    color: '#004C73'
                                }
                                ], false),
                            }
                        }
                    ]
                };


            } else if (tab2ChartType == 2) {
                var option = {
                    color: ['#A290FA', '#FFA12A', '#2AFFA5'],
                    legend: {
                        show: true,
                        textStyle: {
                            color: '#E2F1FF'
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '5%',
                        right: '5%',
                        bottom: '10%',
                        top: '20%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        axisLabel: {
                            color: "#BDE4FF"
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#296085',
                            }
                        },
                        data: xData
                    },
                    yAxis: {
                        name: '秒',
                        type: 'value',
                        minInterval: 1,
                        axisLabel: {
                            color: "#BDE4FF"
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#296085',
                            }
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#296085',
                                type: "dashed"
                            }
                        }
                    },
                    series: [
                        {
                            name: '平均用时',
                            data: avgTime,
                            type: 'line',
                            lineStyle: {
                                shadowColor: 'rgba(20, 20, 20, 0.9)',
                                shadowBlur: 3,
                                shadowOffsetX: 3,
                                shadowOffsetY: 2,
                            },
                        },
                        {
                            name: '最慢用时',
                            data: maxTime,
                            type: 'line',
                            lineStyle: {
                                shadowColor: 'rgba(20, 20, 20, 0.9)',
                                shadowBlur: 3,
                                shadowOffsetX: 3,
                                shadowOffsetY: 2,
                            },
                        },
                        {
                            name: '最快用时',
                            data: minTime,
                            type: 'line',
                            lineStyle: {
                                shadowColor: 'rgba(20, 20, 20, 0.9)',
                                shadowBlur: 3,
                                shadowOffsetX: 3,
                                shadowOffsetY: 2,
                            },
                        },
                    ]
                };


            } else if (tab2ChartType == 3) {
                var option = {
                    color: ['#A290FA', '#FFA12A', '#2AFFA5'],
                    legend: {
                        show: true,
                        textStyle: {
                            color: '#E2F1FF'
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '5%',
                        right: '5%',
                        bottom: '10%',
                        top: '20%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        axisLabel: {
                            color: "#BDE4FF"
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#296085',
                            }
                        },
                        data: xData
                    },
                    yAxis: {
                        name: '%',
                        type: 'value',
                        minInterval: 1,
                        axisLabel: {
                            color: "#BDE4FF"
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#296085',
                            }
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#296085',
                                type: "dashed"
                            }
                        }
                    },
                    series: [
                        {
                            name: '合格率',
                            data: passrateData,
                            type: 'line',
                            lineStyle: {
                                shadowColor: 'rgba(20, 20, 20, 0.9)',
                                shadowBlur: 3,
                                shadowOffsetX: 3,
                                shadowOffsetY: 2,
                            },
                        }
                    ]
                };


            }
            if (tab2Chart) {
                tab2Chart.dispose();
                tab2Chart = null;
            }

            tab2Chart = echarts.init(document.getElementById('tab2-chart'));
            tab2Chart.setOption(option);
        })
        .send();

}



// 训练成绩统计
function tab2Count() {

    $('.tab2-count').empty();

    ["近7天-7", "近30天-30", "本年度-" + new Date().getFullYear()].forEach(item => {

        var tempArr = item.split('-')

        if (
            tempArr[0] == "本年度"
        ) {
            var p = {
                "personId": curPid,
                "trainType": tab2Type,
                "type": 2,
                "year": tempArr[1]
            }
        }
        else {
            var p = {
                "personId": curPid,
                "trainType": tab2Type,
                "type": 4,
                "day": tempArr[1]
            }
        }

        new AjaxChain()
            .setUrl('/train/score/person/best/count')
            .setData(
                JSON.stringify(
                    p
                )
            )
            .setMethod('post')
            .then(data => {

                var num1 = '-', num2 = '-', num3 = '-';
                if (
                    data
                ) {
                    num1 = data[0].minTime + 's'
                    num2 = data[0].avgTime + 's'
                    num3 = data[0].total
                }

                $('.tab2-count').prepend(
                    `<div class="tab2-count-item"><span>${tempArr[0]}</span>
                        <div>
                            <div>
                                <img src="../static/img/sc1.png">
                                <div>
                                    <div class="tab2-score">${num1}</div>
                                    <div>最好成绩</div>
                                </div>
                            </div>
                            <div>
                                <img src="../static/img/sc2.png">
                                <div>
                                    <div class="tab2-score">${num2}</div>
                                    <div>平均成绩</div>
                                </div>
                            </div>
                            <div>
                                <img src="../static/img/sc3.png">
                                <div>
                                    <div class="tab2-score">${num3}</div>
                                    <div>训练次数</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    `
                )


            })
            .send();
    });


}

// 第三个tab


var queryParams

function initChart() {
    drawTab3Bar()
    queryTab3List()
    queryTab3Count()
}

function drawTab3Pie(data) {


    var total = data.total;

    let legendData = [
        {
            name: "优秀",
            value: data.excellent,
            icon: 'path://M100,0 L41.22,180.90 L195.10,69.09 L4.89,69.09 L158.77,180.90 z',
        },
        {
            name: "良好",
            value: data.good,
            icon: 'path://M100,0 L41.22,180.90 L195.10,69.09 L4.89,69.09 L158.77,180.90 z',
        },
        {
            name: "合格",
            value: data.pass,
            icon: 'path://M100,0 L41.22,180.90 L195.10,69.09 L4.89,69.09 L158.77,180.90 z',
        },
        {
            name: "不合格",
            value: data.fail,
            icon: 'path://M100,0 L41.22,180.90 L195.10,69.09 L4.89,69.09 L158.77,180.90 z',
        },
    ]

    var option = {
        animation: true,
        title: {
            "subtext": '   训练成绩统计',
            "subtextStyle": {
                "color": "#D2EAEE",
                "fontSize": 12,
                "align": "center",
            },
        },
        legend: {
            "left": "center",
            "textStyle": {
                "color": "#000",
                "fontSize": 14
            },
            // "icon": "circle",
            itemWidth: 14,
            itemHeight: 14,
            "right": "0",
            "bottom": "10%",
            // "padding": [30, 60],
            // "itemGap": 10,
            textStyle: {
                rich: {
                    name: {
                        width: 100,
                        color: "#D2EAEE"
                    },
                    bfb: {
                        color: "#D2EAEE"
                    },
                    num: {
                        width: 50,
                        color: "#D2EAEE"
                    }
                }
            },
            data: legendData,
            formatter: function (params) {
                const list = legendData.filter((val) => val.name == params)[0]
                let legendHtml = '';
                legendHtml = (`{name|${params}}{bfb|${total == 0 ? '-' : (list.value / (total) * 100).toFixed(0) + '%'}}{num|${" / " + list.value}}{bfb|}`)
                return legendHtml
            },
        },
        series: [{
            "type": "pie",
            "center": ["50%", "40%"],
            "radius": ["30%", "43%"],
            "color": ["#45F5C1", "#F7F948", "#58D0FF", "#FF6161"],
            "startAngle": 135,
            "labelLine": {
                "normal": {
                    "length": 25
                }
            },
            "label": {
                "normal": {
                    show: false
                }
            },
            "data": legendData
        }]
    }
    var mychart = echarts.init(document.getElementById('top-right'));
    mychart.setOption(option);
}


function drawTab3Bar() {



    new AjaxChain()
        .setUrl('/train/score/person/time/count')
        .setData(
            JSON.stringify(queryParams)
        )
        .setMethod('post')
        .then(data => {

            var xData = [], yData = []

            $.each(data[0], function (key, value) {
                xData.push(value.date)
                yData.push(value.total)
            })


            var myChart = echarts.init(document.getElementById('left-chart'));

            var option = {
                color: ['#80A0FF'],
                legend: {
                    show: true,
                    textStyle: {
                        color: '#E2F1FF'
                    }
                },
                grid: {
                    left: '2%',
                    right: '3%',
                    bottom: '10%',
                    top: '10%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        color: "#BDE4FF"
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#296085',
                        }
                    },
                    data: xData
                },
                yAxis: {
                    type: 'value',
                    minInterval: 1,
                    axisLabel: {
                        color: "#BDE4FF"
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#296085',
                            type: "dashed"
                        }
                    }
                },
                series: [
                    {
                        data: yData,
                        type: 'line',
                        lineStyle: {
                            shadowColor: 'rgba(20, 20, 20, 0.9)',
                            shadowBlur: 3,
                            shadowOffsetX: 3,
                            shadowOffsetY: 2,
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'hsla(236, 84.70%, 61.60%, 0.70)' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: 'rgba(79,166,255, 0)' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        },
                    }
                ]
            };


            myChart.setOption(option);


        })
        .send();



}



function queryTab3List() {
    new AjaxChain()
        .setUrl('/train/score/person/best/count')
        .setData(
            JSON.stringify(
                queryParams
            )
        )
        .setMethod('post')
        .then(data => {

            $('.toolle-bottom')
                .empty()
                .append(
                    data.reduce((x, y) => {
                        let temp = new ST().project(1).find(function (activity) {
                            return activity.type === y.trainType;
                        });

                        return x + `<div>
                                <li>${temp.name}</li>
                                <li>${y.minTime}</li>
                                <li>${y.avgTime}</li>
                                <li>${y.total}</li>
                                <li>${y.total - y.fail}</li>
                                <li>${y.total == 0 ? '-' : ((y.total - y.fail) / (y.total) * 100).toFixed(0) + '%'}</li>
                            </div>`
                    }, `<div><li>项目类型</li><li>最好成绩</li><li>平均成绩</li><li>训练次数</li><li>合格次数</li><li>合格率</li></div>`)
                )

        })
        .send();
}


function queryTab3Count() {


    new AjaxChain()
        .setUrl('/train/score/person/pass/time/count')
        .setData(
            JSON.stringify(queryParams)
        )
        .setMethod('post')
        .then(data => {
            if (!data) {
                data = {
                    "total": 0,
                    "excellent": 0,
                    "good": 0,
                    "pass": 0,
                    "fail": 0,
                    "passRate": 0
                }
            }

            $('.left-number').empty().append(
                `<div class="number-item">
                        <span>${data.total}</span>
                        <div>训练次数</div>
                    </div>
                    <div class="number-item">
                        <span>${data.total - data.fail}</span>
                        <div>合格次数</div>
                    </div>
                    <div class="number-item">
                        <span>${data.passRate}</span>
                        <div>合格率</div>
                </div>`
            )

            drawTab3Pie(data)

        })
        .send();

}
// 第三个tab



// 第四个tab

function tab4MonthData() {

    new AjaxChain()
        .setUrl('/sign/countByMonth')
        .setData({
            month: $('#laydate-type-month').val(),
            personId: curPid
        })
        .then(data => {

            var xData = data.map(item => (item.day || 0))
            var yData = data.map(item => (item.count || 0))

            drawLine('countByMonth', xData, yData)
        })
        .send();
}

function tab4YearData() {

    new AjaxChain()
        .setUrl('/sign/countByYear')
        .setData({
            year: $('#laydate-type-year').val(),
            personId: curPid
        })
        .then(data => {
            var xData = data.map(item => (item.month || 0))
            var yData = data.map(item => (item.count || 0))

            drawBar('countByYear', xData, yData)

        })
        .send();

}

function tab4AllData() {

    new AjaxChain()
        .setUrl('/sign/countThreeYear')
        .setData({
            personId: curPid
        })
        .then(data => {

            $(".chart-all").empty().append(
                `
                <div class="chart-all-item">
                    <div class="chart-circle">
                        <div style="font-size: 0.24rem;">${Object.values(data)[2] || 0}</div>
                        <div style="font-size: 0.12rem;">
                            <div>${Object.keys(data)[2]}年</div>
                            <div>打卡总数</div>
                        </div>
                    </div>
                    <div class="chart-other">
                        <div><span>${Object.keys(data)[1]}年</span><span>${Object.values(data)[1] || 0}</span></div>
                        <div><span>${Object.keys(data)[0]}年</span><span>${Object.values(data)[0] || 0}</span></div>
                    </div>
                </div>
                `
            )
        })
        .send();

}




